<template>
  <view class="container" :style="{ backgroundColor: theme?.background || '#f8f8f8', color: theme?.text || '#333' }">
    <view class="settings-list">
      <view class="settings-item">
        <text class="settings-label">声音类型</text>
        <picker @change="changeSoundType" :value="soundTypeIndex" :range="soundTypeNames">
          <view class="settings-value" :style="{ backgroundColor: theme?.background || '#f5f5f5', color: theme?.primary || '#007AFF' }">
            {{ soundTypeNames[soundTypeIndex] }}
          </view>
        </picker>
      </view>
      
      <view class="settings-item">
        <text class="settings-label">声音音量</text>
        <slider 
          :value="volume" 
          min="0" 
          max="100" 
          show-value 
          @change="changeVolume" 
          :activeColor="theme?.primary || '#007AFF'"
        />
      </view>
      
      <view class="settings-item">
        <text class="settings-label">振动反馈</text>
        <switch 
          :checked="vibrationEnabled" 
          @change="toggleVibration" 
          :color="theme?.primary || '#007AFF'" 
        />
      </view>
      
      <view class="settings-item">
        <text class="settings-label">背景播放</text>
        <switch 
          :checked="backgroundPlayEnabled" 
          @change="toggleBackgroundPlay" 
          :color="theme?.primary || '#007AFF'" 
        />
      </view>
      
      <view class="settings-item">
        <text class="settings-label">默认拍号</text>
        <picker @change="changeDefaultTimeSignature" :value="defaultTimeSignatureIndex" :range="timeSignatures">
          <view class="settings-value" :style="{ backgroundColor: theme?.background || '#f5f5f5', color: theme?.primary || '#007AFF' }">
            {{ timeSignatures[defaultTimeSignatureIndex] }}
          </view>
        </picker>
      </view>
      
      <view class="settings-item">
        <text class="settings-label">默认速度</text>
        <view class="number-input-container">
          <input 
            type="number" 
            :value="defaultTempo.toString()" 
            @input="changeDefaultTempo" 
            class="number-input" 
            :style="{ backgroundColor: theme?.background || '#f5f5f5' }"
          />
          <text class="input-unit">BPM</text>
        </view>
      </view>
      
      <view class="settings-item">
        <text class="settings-label">主题颜色</text>
        <picker @change="changeTheme" :value="themeIndex" :range="themes">
          <view class="settings-value" :style="{ backgroundColor: theme?.background || '#f5f5f5', color: theme?.primary || '#007AFF' }">
            {{ themes[themeIndex] }}
          </view>
        </picker>
      </view>
    </view>
    
    <view class="footer">
      <button 
        class="reset-btn" 
        @tap="resetSettings"
        :style="{ backgroundColor: theme?.background || '#f0f0f0', color: theme?.text || '#666' }"
      >
        恢复默认设置
      </button>
      <button 
        class="save-btn" 
        @tap="saveSettings"
        :style="{ backgroundColor: theme?.primary || '#007AFF', color: theme?.text === '#FFFFFF' ? theme.text : 'white' }"
      >
        保存设置
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import metronomeService from '../../utils/metronomeService.js';
import themeService from '../../utils/themeService.js';

// 数据状态
const soundTypeNames = ref(metronomeService.soundTypes.map(type => type.name));
const soundTypeIndex = ref(1);
const volume = ref(80);
const vibrationEnabled = ref(true);
const backgroundPlayEnabled = ref(false);
const timeSignatures = ref(['4/4', '3/4', '2/4', '6/8', '5/4']);
const defaultTimeSignatureIndex = ref(0);
const defaultTempo = ref(60);
const themes = ref(themeService.themeIndexToName);
const themeIndex = ref(0);
const theme = ref(null);

// 方法
function changeSoundType(e) {
  soundTypeIndex.value = e.detail.value;
}

function changeVolume(e) {
  volume.value = e.detail.value;
}

function toggleVibration(e) {
  vibrationEnabled.value = e.detail.value;
  
  // 如果启用振动，提供振动反馈
  if (vibrationEnabled.value) {
    uni.vibrateShort({ success: () => {} });
  }
}

function toggleBackgroundPlay(e) {
  backgroundPlayEnabled.value = e.detail.value;
}

function changeDefaultTimeSignature(e) {
  defaultTimeSignatureIndex.value = e.detail.value;
}

function changeDefaultTempo(e) {
  let value = parseInt(e.detail.value);
  // 确保值在有效范围内
  if (isNaN(value) || value < 30) {
    value = 30;
  } else if (value > 240) {
    value = 240;
  }
  defaultTempo.value = value;
}

function changeTheme(e) {
  themeIndex.value = e.detail.value;
  
  // 应用新主题
  theme.value = themeService.applyTheme(themes.value[themeIndex.value]);
}

function resetSettings() {
  uni.showModal({
    title: '确认重置',
    content: '确定要将所有设置恢复到默认值吗？',
    success: (res) => {
      if (res.confirm) {
        // 重置为默认值
        soundTypeIndex.value = 1;
        volume.value = 80;
        vibrationEnabled.value = true;
        backgroundPlayEnabled.value = false;
        defaultTimeSignatureIndex.value = 0;
        defaultTempo.value = 60;
        themeIndex.value = 0;
        
        // 应用默认主题
        theme.value = themeService.applyTheme(themes.value[themeIndex.value]);
        
        // 保存设置
        saveSettings();
        
        uni.showToast({
          title: '已重置为默认设置',
          icon: 'success'
        });
      }
    }
  });
}

function saveSettings() {
  // 将设置保存到本地存储
  const settings = {
    soundTypeIndex: soundTypeIndex.value,
    volume: volume.value,
    vibrationEnabled: vibrationEnabled.value,
    backgroundPlayEnabled: backgroundPlayEnabled.value,
    defaultTimeSignatureIndex: defaultTimeSignatureIndex.value,
    defaultTempo: defaultTempo.value,
    themeIndex: themeIndex.value
  };
  
  // 应用设置到metronomeService
  metronomeService.setSoundType(soundTypeIndex.value);
  metronomeService.setVolume(volume.value / 100);
  metronomeService.setVibration(vibrationEnabled.value);
  
  uni.setStorageSync('metronomeSettings', settings);
  
  uni.showToast({
    title: '设置已保存',
    icon: 'success'
  });
}

function loadSettings() {
  try {
    const settings = uni.getStorageSync('metronomeSettings');
    if (settings) {
      soundTypeIndex.value = settings.soundTypeIndex !== undefined ? settings.soundTypeIndex : 1;
      volume.value = settings.volume || 80;
      vibrationEnabled.value = typeof settings.vibrationEnabled !== 'undefined' ? settings.vibrationEnabled : true;
      backgroundPlayEnabled.value = settings.backgroundPlayEnabled || false;
      defaultTimeSignatureIndex.value = settings.defaultTimeSignatureIndex || 0;
      defaultTempo.value = settings.defaultTempo || 60;
      themeIndex.value = settings.themeIndex || 0;
    }
  } catch (e) {
    console.error('加载设置失败:', e);
  }
}

// 生命周期钩子
onLoad(() => {
  loadSettings();
});
</script>

<style>
.container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  box-sizing: border-box;
}

.settings-list {
  flex: 1;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #eee;
}

.settings-label {
  font-size: 32rpx;
}

.settings-value {
  font-size: 32rpx;
  padding: 10rpx 30rpx;
  border-radius: 10rpx;
}

.number-input-container {
  display: flex;
  align-items: center;
}

.number-input {
  width: 100rpx;
  height: 60rpx;
  border-radius: 10rpx;
  text-align: center;
  margin-right: 10rpx;
  font-size: 32rpx;
}

.input-unit {
  font-size: 28rpx;
  color: #666;
}

.footer {
  margin-top: 60rpx;
  display: flex;
  justify-content: space-between;
}

.reset-btn, .save-btn {
  width: 45%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
}
</style>